<template>
  <div class="base-container">
    <div class="topButton">
      <el-button class="Btn" size="small" type="topSubButtom" @click="addCommunity">
        <svg-icon icon-class="add" class="buttonSvg"/>
        添加
      </el-button>
      <el-button class="Btn" size="small" type="topSubButtom" @click="deleteCommunity('')">
        <svg-icon icon-class="remove" class="buttonSvg"/>
        删除
      </el-button>
    </div>
    <el-table
        :data="tableData"
        empty-text="暂无数据"
        :default-sort="{ prop: 'date', order: 'descending' }"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column prop="domainName" label="区域名称" align="center"/>
      <el-table-column prop="managerName" label="区域负责人" align="center"/>
      <el-table-column prop="managerMobile" label="联系电话" align="center"/>
      <el-table-column prop="cityName" label="省" align="center"/>
      <el-table-column prop="provinceName" label="市" align="center"/>
      <el-table-column prop="regionName" label="区" align="center"/>
      <el-table-column prop="address" label="地址"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button class="Btn" size="small" type="del" @click="updateCommunity(scope.row)">
            <svg-icon icon-class="edit" class="buttonSvg"/>
          </el-button>
          <el-button class="btn-donate" size="small" type="del" @click="deleteCommunity(scope.row.domainId)">
            <svg-icon icon-class="del" class="buttonSvg"/>
          </el-button>
          <el-button class="Btn" size="small" type="del" @click="selPrincipal(scope.row.domainId)">
            <svg-icon icon-class="principal" class="buttonSvg"/>
          </el-button>
          <el-button class="Btn" size="small" type="del" @click="selRegionRendering(scope.row.domainId,scope.row.pointList)">
            <svg-icon icon-class="regionRendering" class="buttonSvg"/>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <edit-domain-dialog ref="edit_domain_dialog"/>
    <domain-principal-dialog ref="domain_principal_dialog"/>
    <region-rendering-dialog ref="region_rendering_dialog"/>
  </div>
</template>

<script>
import EditDomainDialog from "@/views/domain/components/EditDomainDialog.vue";
import DomainPrincipalDialog from "@/views/domain/components/DomainPrincipalDialog.vue";
import RegionRenderingDialog from "@/views/domain/components/RegionRenderingDialog.vue";

let me;

export default {
  name: "DomainManagement",
  components: {RegionRenderingDialog, DomainPrincipalDialog, EditDomainDialog},
  data() {
    return {
      tableData: [],
      selected: []
    }
  },
  mounted() {
    me = this;
    this.selTableData();
  },
  methods: {
    handleSelectionChange(val) {
      this.selected = val;
    },
    deleteCommunity(id) {
      if (id == '') {
        if (me.selected.length <= 0) {
          me.$message.warning('请选择需要删除的区域');
          return;
        }
      }
      this.$confirm("是否删除所选区域?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "confirm"
      })
          .then(async () => {
            try {
              let response = await this.$asyncPost("domain", {
                actionType: "domainDelete",
                domainIds: id != '' ? [id] : this.selected.map(item => item.domainId)
              });
              if (response.success) {
                this.$message.success("删除成功");
                this.selTableData();
              } else {
                this.$message.error(response.message);
              }
            } catch (error) {
              this.$message.error("删除时发生错误");
            }
          })
          .catch(() => {
            this.$message.info("取消");
          })
    },
    selRegionRendering(id,pointList){
      this.$refs.region_rendering_dialog.showDialog(id,pointList);
    },
    selPrincipal(id) {
      this.$refs.domain_principal_dialog.showDialog(id);
    },
    addBuilding(row) {
      this.$refs.add_building_dialog.showDialog(row);
    },
    updateCommunity(row) {
      this.$refs.edit_domain_dialog.showDialog(row);
    },
    addCommunity() {
      this.$refs.edit_domain_dialog.showDialog();
    },
    async selTableData() {
      let response = await this.$asyncPost("domain", {
        actionType: "domainQuery"
      });
      if (response.success) {
        me.tableData = response.dataList;
      } else {
        this.$message.error(response.message);
      }
    }
  }
}
</script>

<style scoped>

</style>